<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	.list {
		padding: 0.5rem;
	}
	.relateItem {
		position: relative;
		border-radius: 0.25rem;
		padding: 0.4rem 0.4rem 0.4rem 2rem;
		background: #FFF;
		margin-top: 0.5rem;
	}
	.relateItem:first-child {
		margin: 0;
	}
	.relateItem .check {
		position: absolute;
		left: 0;
		top: 0;
		width: 2rem;
		height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 1rem;
		background-image: url(../../image/common/radio_off.png);
	}
	.relateItem.checked .check {
		background-image: url(../../image/common/radio_on.png);
	}
	.relateItem .relatePic {
		width: 3.6rem;
		height: 3.6rem;
		border-radius: 0.25rem;
	}
	.relateItem .relateText {
		height: 3.6rem;
		padding: 0.25rem 0 0.25rem 0.5rem;
	}
	.relateItem .relateTtl {
		font-size: 0.6rem;
	}
	.relateItem .price {
		margin-right: 0.25rem;
	}
	.relateItem .comQuan {
		transform: scale(0.7);
	}
	.relateItem .earn {
		margin-right: -0.4rem;
		font-size: 0.4rem;
		color: #FFF;
		line-height: 0.7rem;
		background: #E73350;
		padding: 0 0.2rem 0 0.4rem;
		border-radius: 0.35rem 0 0 0.35rem;
	}
</style>
</head>
<body class="bg-f5">
<div id="app">
	<div class="list">
		<div v-for="(it,index) in dataLists" :data-id="it.shop_id" class="relateItem aui-flex-col aui-flex-middle" tapmode onClick="openProduct(this);">
			<div class="check" tapmode onclick="checkThis(this)"></div>
			<div class="relatePic bgCover" :style="{ 'background-image' : 'url('+ it.pict_url +')' }"></div>
			<div class="relateText flex-auto aui-flex-row aui-flex-between">
				<div class="relateTtl aui-ellipsis-2">{{ it.title }}</div>
				<div class="aui-flex-col aui-flex-middle">
					<div class="font-helvet price">¥{{ it.coupon_amount }}</div>
					<dl class="comQuan outline aui-flex-col aui-flex-middle" v-if="it.coupon_info">
						<dt>券</dt>
						<dd>{{ it.coupon_info }}元</dd>
					</dl>
					<div class="flex-auto"></div>
					<div class="earn" v-if="it.data_amount && getUserVip()>1">赚￥{{ it.data_amount }}</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var vm;
var vuedata = {
	dataLists: []
};
var selected = [];
var isLoading = false;
var loadFlag = true;
var pageSize = 20;
var currentPage = 1;
var currentSearch = '';
var postData = {
	pageSize: pageSize
};

vm = new Vue({
	el: '#app',
	data: vuedata,
	updated: function () {
		api.parseTapmode();
	}
});
apiready = function() {
	api.parseTapmode();
	if(getUserId()){
		postData.userid = getUserId();
	}
	getData();
	//监听到达底部
	api.addEventListener({
		name: 'scrolltobottom',
		extra: {
			threshold: 0
		}
	}, function(ret, err) {
		if (isLoading) return;
		if (loadFlag) {
			getData();
		}
	});
};

//搜索事件
function searchFn(s){
	//document.body.scrollTop = 0;
	loadFlag = true;
	currentSearch = s;
	currentPage = 1;
	vuedata.dataLists = [];
	getData();
}
function getData() {
	isLoading = true;
	postData.search = currentSearch;
	postData.pageNo = currentPage;
	api.ajax({
		url: BASE_URL_2 + 'App/Select/shopList',
		method: 'post',
		data: {
			values: postData
		}
	}, function(ret, err) {
		if (ret) {
			if (ret.code == 1 && ret.data.length > 0) {
				if(currentPage == 1){
					vuedata.dataLists = ret.data;
				}else{
					vuedata.dataLists = vuedata.dataLists.concat(ret.data);
				}
				currentPage++;
				//如果加载出来的数量 小于 pagesize 说明到底线了
				if (ret.data.length < postData.pageSize) {
					loadFlag = false;
				}
			} else {
				loadFlag = false;
			}
		}
		isLoading = false;
	});
}


	//跳转商品详情
	function openProduct(el){
		var _this = $$(el);
		var id = _this.data('id');
		openProductDetail(id);
	}
	//选中
	function checkThis(el){
		var item = $$(el).parents('.relateItem');
		item.toggleClass('checked');
		updateLen();
		event.stopPropagation();
	}
	//更新footer按钮 选中数量
	function updateLen(){
		var len = $$('.relateItem.checked').length;
		api.execScript({
			script:'updateLen('+len+');'
		});
		selected = [];
		$$('.relateItem.checked').each(function(i){
			var id = $$(this).data('id');
			var ttl = $$(this).find('.relateTtl').text();
			var obj = {
				godId: id,
				godTtl: ttl,
				isFan: false,
				left: 10*i+30+'px',
				top: 30*i+100+'px'
			}
			selected.push(obj);
		});
	}
	function save(){
		if(selected.length){
			api.sendEvent({
				name: 'publishAddGodEvent',
				extra: {
					info: selected
				}
			});
		}
		setTimeout(function(){
			api.closeWin();
		},50);
	}
</script>
</html>
